<template>
	<view>
		<u-swiper :list="slides" name="img_url" height="320"></u-swiper>
		<view class="u-text-center u-m-t-20 u-m-b-20">
			<u-tabs :list="sortList" bar-width="160" item-width="160" :current="current" @change="change"></u-tabs>
		</view>
		<u-row gutter="16" class="u-skeleton">
			<u-col span="6" v-for="(goods,index) in goodsList" :key="index">
<!-- 			<u-col span="6" v-for="(goods,index) in goodsList.length !==0 ? goodsList : " :key="index"> -->
			<!-- <u-col span="6" v-for="(goods,index) in goodsList" :key="index"> -->
			<!-- <view class="goodsItem">
				<goods-card :goods="goods" :loading="loading"></goods-card>
			</view> -->
				<goods-card :goods="goods" :loading="loading"></goods-card>
			</u-col>
		</u-row>
		<!-- 引用骨架屏组件 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortList: [
				{name: '默认'},
				{name: '销量'},
				{name: '推荐'},
				{name: '最新'}
			],
			current: 0,
			slides: [],
			goodsList: [{},{},{},{}],
			page: 1,
			loading: false
		};
	},
	onLoad() {
		this.getPageData()
		// this.$u.post('/api/auth/login').then(res => {
		// 	console.log(res);
		// })

		// let res = await this.$u.patch('/api/orders/1/confirm');
		// const res = await this.$u.api.index()
		// console.log(res);

		// 测试登陆
		// const data = {
		// 	email: 'test@a.com',
		// 	password: '123123'
		// };
		// const res = await this.$u.api.authLogin(data);
		// console.log(res);

		// 测试vuex
		// 设置vuex值
		// this.$u.vuex('vuex_name', 'moben');
		// console.log(this.vuex_name);
	},
	methods: {
		change(index) {
			this.current = index;
			
			// 重置分页与商品数据,并重新加载数据
			this.goodsList = [{},{},{},{}];
			this.page = 1;
			this.getPageData();
		},
		async getPageData() {
			this.loading = true; //显示骨架屏
			let params = {
				page: this.page
			}
			// 处理筛选数据请求
			if(this.current == 1) params.sales = 1;
			if(this.current == 2) params.recommend = 1;
			if(this.current == 3) params.new = 1;
			
			// 发送API请求数据
			const res = await this.$u.api.index(params);
			this.loading = false; //隐藏骨架屏
			this.slides = res.slides;
			this.goodsList = this.goodsList.pop().title ? [...this.goodsList, ...res.goods.data] : res.goods.data;
		}
	},
	// 加载更多
	onReachBottom() {
		this.page = this.page + 1;
		this.getPageData()
	}
};
</script>

<style lang="scss" scoped>
	.goodsItem {
		margin: 40rpx 0;
		box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
	}
	
</style>
